import React, { Component } from 'react';

import { message, Table, Switch, Button, Modal } from "antd"
import { EditOutlined, DeleteOutlined, ExclamationCircleOutlined } from "@ant-design/icons"
import { getRoleList } from '@/api/role';

// 导入确认弹框
const { confirm } = Modal;



class Role extends Component {
    // 列信息
    columns = [
        { title: "角色名称", dataIndex: "rolename", key: "rolename" },
        // 自定义列模板信息
        // 如果dataIndex 存在且字段存在于列表中，那么val就是这个字段的数据，否则就是这一行的数据
        // render: (val) => JSX  val就是这个字段的数据 或 这一行的数据

        {
            title: "角色状态",
            dataIndex: "status",
            key: "status",
            render: val => <Switch defaultChecked={val == 1} />
        },
        {
            title: "操作",
            key: "action",
            render: (val) => (<>
                <Button type="primary" key="edit" onClick={() => this.change_role(val) } shape="circle" icon={<EditOutlined />} ></Button>
                <Button type="danger" key="del" onClick={() => this.del_role(val) } shape="circle" icon={<DeleteOutlined />} ></Button>
            </>)
        }
    ]
    state = {
        // 菜单列表
        rolelist: [],
        // 弹框开心
        isModalVisible:false
    }
    // 修改角色事件
    change_role =(row)=>{
        console.log(row);
        console.log("修改角色事件");
        this.setState({
            isModalVisible:true
        })
    }   
    // 删除角色
    del_role = (row)=>{
        confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '确定删除吗？',
            onOk() {
                console.log('确定删除，发送ajax');
                console.log("删除角色");
                console.log(row);
            },  
            onCancel() {
                console.log('取消删除');
            },
        });
    }
    // 提交事件
    submit = ()=>{
        console.log("提交了");
    }
    render() {
        let { rolelist, isModalVisible } = this.state;
        return (
            <>
                {/* dataSource表格的数据；columns表格的列信息 */}
                <Table dataSource={rolelist} columns={this.columns} />
                {/* 弹框 */}
                <Modal
                    title="添加/修改"
                    visible={isModalVisible}
                    onOk={ this.submit }
                    onCancel={() => this.setState({ isModalVisible:false}) }
                >
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Modal>
            </>
        );
    }
    async componentDidMount() {
        let { code, list, msg } = await getRoleList();
        if (code !== 200) return message.error('获取失败' + msg)
        this.setState({
            rolelist: list
        })
    }
}

export default Role;
